/*
 * @Author: lduoduo
 * @Date: 2021-04-13 14:38:40
 * @Last Modified by: lduoduo
 * @Last Modified time: 2021-04-13 16:51:47
 * 流程编辑页面右边的属性面板
 */

import React, { useEffect, useState, useRef } from 'react';

import PropertiesNode from './PropertiesNode';
import PropertiesForm from './PropertiesForm';

const TabList = [
  {
    label: '节点',
    value: 'Node',
    Comp: PropertiesNode,
  },
  {
    label: '流程',
    value: 'Process',
    Comp: PropertiesNode,
  },
  {
    label: '表单',
    value: 'Form',
    Comp: PropertiesForm,
  },
];

export default function (props) {
  const { modeler } = props;
  const [visibleTabIds, setVisibleTabIds] = useState(TabList.slice(0, 2).map((d) => d.value));
  const [tab, setTab] = useState(TabList[1]);

  const onTabVisible = (k, visible) => {
    const i = visibleTabIds.findIndex((d) => d === k);

    if (i > -1 && visible) return;
    if (i === -1 && !visible) return;

    visible && visibleTabIds.push(k);
    !visible && visibleTabIds.splice(i, 1);

    setVisibleTabIds([...visibleTabIds]);

    if (!visible && tab.value === k) {
      setTab(TabList[0]);
    }
  };

  return (
    <div className="comp-properties">
      <div className="comp-head">
        {visibleTabIds.map((k, i) => {
          const d = TabList.find((o) => o.value === k);
          const className = `comp-head-item ${d.value === tab.value ? 'active' : ''}`;

          return (
            <span key={d.value} className={className} onClick={() => setTab(d)}>
              {d.label}
            </span>
          );
        })}
      </div>

      {TabList.map((d) => {
        const { Comp } = d;
        return (
          <Comp
            key={d.value}
            className={d.value === tab.value ? 'active' : ''}
            isRoot={d.value === 'Process'}
            modeler={modeler}
            onTabSwitch={(k) => setTab(TabList[k])}
            onTabVisible={onTabVisible}
          />
        );
      })}
    </div>
  );
}
